<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
<script>

  // 3.没有块级作用域引起的问题: for的块级
  // 为什么闭包可以解决问题：函数是一个作用域。
  var btns = document.getElementsByTagName('button');
  for (var i = 0; i < btns.length; i++) {
    // 这里不加这个闭包就会有i总是赋值到最后一个按钮的问题
    (function (i) {
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击')
      })
    })(i)
  }

  // 1.情况一： ES5中没有使用闭包（错误的方式）
  // 懒得写了
  // 2.情况二： ES5中使用闭包
  // 懒得写了
  // ES6中的let
  // 懒得写了
</script>
</body>
</html>
